<template>
	<view>
		<view class="shop_infor">
			<image src="" mode=""></image>
			<text class="infor_title">Microsoft Xbox one S专业游戏玩家机 1TB</text>
			<text class="center_mar sfk">实付款：</text>
			<text class="center_mar fh">¥</text>
			<text class="center_mar">283.92</text>
			<text class="center_num">x1</text>
		</view>
		<view class="requesr_type">
			<view class="requesr_name">退货类型</view>
			<text :class="['select_text',selects==1? 'select_txt':'']" @click="btns(1)">仅退款</text>
			<text :class="['select_text',selects==2? 'select_txt':'']" @click="btns(2)">退款退货</text>
		</view>
		<view class="request_content">
			<view class="content_name">退货理由</view>
			<radio-group class="options">
				<label class="options_list">
					<radio style="transform: scale(0.7);"/><text>阿巴阿巴</text>
				</label>
				<label class="options_list">
					<radio  style="transform: scale(0.7);"/><text>货品有瑕疵/假货</text>
				</label>
				<label class="options_list">
					<radio  style="transform: scale(0.7);"/><text>质量问题</text>
				</label>
				<label class="options_list">
					<radio  style="transform: scale(0.7);"/><text>后台维护</text>
				</label>
			</radio-group>
			<textarea class="request_reson" value="" placeholder="可以在这里补充理由～" />
			<image class="add_img" src="" mode=""></image>
		</view>
		<view class="bottoms">
			<text class="btn" @click="tijao">提交申请</text>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				selects:0
			}
		},
		methods:{
			btns(i){
				this.selects=i
			},
			tijao(){
					this.$http.req.ajax({
						path: '/api/common.page/slider_list',
						data: {
							token: uni.getStorageSync('usertoken'),
						},
						afterAjax: (res) => {
							console.log(res)
						}
					})
				}
		}
	}
</script>

<style>
	page {
		background: #F5F5F5;
	}

	.shop_infor {
		width: 750rpx;
		height: 226rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 14rpx;
		margin: auto;
	}

	.shop_infor image {
		width: 173rpx;
		height: 173rpx;
		margin: 25rpx;
		float: left;
		background: #EEEEEE;
		border-radius: 14rpx;
	}

	.infor_title {
		width: 496rpx;
		height: 72rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 36rpx;
		color: #21201D;
		opacity: 1;
		margin-top: 25rpx;
		float: left;
		overflow: hidden;
		margin-left: 3rpx;
	}

	.center_mar {
		margin-top: 54rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #EB3E3E;
		opacity: 1;
		display: inline-block;
	}

	.sfk {
		font-size: 21rpx;
		color: #999999;
	}

	.fh {
		color: #999999;
		font-size: 21rpx;
		color: #EB3E3E;
	}

	.center_num {
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		opacity: 1;
		float: right;
		margin-top: 61rpx;
		margin-right: 25rpx;
	}

	.requesr_type {
		width: 706rpx;
		height: 159rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 18rpx;
		margin: auto;
		margin-top: 25rpx;
	}

	.requesr_name {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		opacity: 1;
		padding: 21rpx 21rpx 25rpx 21rpx;
	}

	.select_text {
		background: #FFFFFF;
		border: 1rpx solid #EEEEEE;
		opacity: 1;
		border-radius: 25rpx;
		padding: 10rpx 23rpx;
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		margin-left: 21rpx;
	}

	.select_txt {
		background: #FCDA22!important;
		border: 1rpx solid #FCDA22!important;
	}
	.request_content{
		width: 706rpx;
		height: 588rpx;
		background: #FFFFFF;
		margin: auto;
		margin-top: 25rpx;
		border-radius: 18rpx;
	}
	.content_name{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		opacity: 1;
		padding: 21rpx;
	}
	.options{
		width: 663rpx;
		height: 144rpx;
		margin: auto;
		display: block;
	}
	.options_list{
		width: 330rpx;
		float: left;
		display: inline-block;
		margin-bottom: 21rpx;
	}
	.options_list text{
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		opacity: 1;
	}
	.request_reson{
		width: 663rpx;
		height: 184rpx;
		background: #F5F5F5;
		opacity: 1;
		border-radius: 7rpx;
		margin: auto;
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #EEEEEE;
		padding-top: 18rpx;
		text-indent: 21rpx;
	}
	.add_img{
		width: 115rpx;
		height: 115rpx;
		background: #EEEEEE;
		margin: 21rpx;
	}
	.bottoms{
		 width: 750rpx;
		 height: 109rpx;
		 background: #FFFFFF;
		 position: fixed;
		 bottom: 0rpx;
	}
	.btn {
		width: 699rpx;
		height: 79rpx;
		background: linear-gradient(206deg, #FCCA22 0%, #FFE246 100%);
		opacity: 1;
		border-radius: 39rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		text-align: center;
		line-height: 79rpx;
		display: block;
		margin-top: 14rpx;
		margin-left: 25rpx;
	}
	
</style>
